<template>
  <div class="exam-taking" v-loading="loading">
    <!-- 考试头部 -->
    <div class="exam-header">
      <div class="header-left">
        <h1 class="exam-title">{{ exam.title }}</h1>
        <div class="exam-info">
          <span class="info-item">
            <el-icon><Document /></el-icon>
            {{ currentQuestionIndex + 1 }} / {{ questions.length }}
          </span>
          <span class="info-item">
            <el-icon><Clock /></el-icon>
            {{ formatTime(remainingTime) }}
          </span>
        </div>
      </div>
      
      <div class="header-right">
        <el-button
          type="warning"
          plain
          @click="handlePause"
          :disabled="!canPause"
        >
          暂停考试
        </el-button>
        
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          提交试卷
        </el-button>
      </div>
    </div>
    
    <!-- 考试内容 -->
    <div class="exam-content">
      <div class="content-wrapper">
        <!-- 题目区域 -->
        <div class="question-area">
          <div class="question-header">
            <div class="question-number">
              第 {{ currentQuestionIndex + 1 }} 题
            </div>
            <div class="question-type">
              {{ getQuestionTypeText(currentQuestion.type) }}
            </div>
            <div class="question-score">
              {{ currentQuestion.score }} 分
            </div>
          </div>
          
          <div class="question-content">
            <div class="question-text" v-html="currentQuestion.content"></div>
            
            <!-- 题目图片 -->
            <div v-if="currentQuestion.images && currentQuestion.images.length" class="question-images">
              <img
                v-for="(image, index) in currentQuestion.images"
                :key="index"
                :src="image"
                :alt="`题目图片${index + 1}`"
                class="question-image"
                @click="previewImage(image)"
              />
            </div>
            
            <!-- 答题区域 -->
            <div class="answer-area">
              <!-- 单选题 -->
              <div v-if="currentQuestion.type === 'single'" class="single-choice">
                <el-radio-group
                  v-model="answers[currentQuestion.id]"
                  @change="saveAnswer"
                >
                  <div
                    v-for="(option, index) in currentQuestion.options"
                    :key="index"
                    class="option-item"
                  >
                    <el-radio :label="option.key" class="option-radio">
                      <span class="option-key">{{ option.key }}.</span>
                      <span class="option-text" v-html="option.text"></span>
                    </el-radio>
                  </div>
                </el-radio-group>
              </div>
              
              <!-- 多选题 -->
              <div v-else-if="currentQuestion.type === 'multiple'" class="multiple-choice">
                <el-checkbox-group
                  v-model="answers[currentQuestion.id]"
                  @change="saveAnswer"
                >
                  <div
                    v-for="(option, index) in currentQuestion.options"
                    :key="index"
                    class="option-item"
                  >
                    <el-checkbox :label="option.key" class="option-checkbox">
                      <span class="option-key">{{ option.key }}.</span>
                      <span class="option-text" v-html="option.text"></span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
              
              <!-- 判断题 -->
              <div v-else-if="currentQuestion.type === 'judge'" class="judge-choice">
                <el-radio-group
                  v-model="answers[currentQuestion.id]"
                  @change="saveAnswer"
                >
                  <div class="judge-options">
                    <el-radio label="true" class="judge-option">
                      <el-icon class="judge-icon correct"><Check /></el-icon>
                      正确
                    </el-radio>
                    <el-radio label="false" class="judge-option">
                      <el-icon class="judge-icon wrong"><Close /></el-icon>
                      错误
                    </el-radio>
                  </div>
                </el-radio-group>
              </div>
              
              <!-- 填空题 -->
              <div v-else-if="currentQuestion.type === 'fill'" class="fill-answer">
                <div
                  v-for="(blank, index) in currentQuestion.blanks"
                  :key="index"
                  class="blank-item"
                >
                  <label class="blank-label">第{{ index + 1 }}空：</label>
                  <el-input
                    v-model="answers[currentQuestion.id][index]"
                    placeholder="请输入答案"
                    @input="saveAnswer"
                    class="blank-input"
                  />
                </div>
              </div>
              
              <!-- 简答题 -->
              <div v-else-if="currentQuestion.type === 'essay'" class="essay-answer">
                <el-input
                  v-model="answers[currentQuestion.id]"
                  type="textarea"
                  :rows="8"
                  placeholder="请输入您的答案..."
                  @input="saveAnswer"
                  show-word-limit
                  :maxlength="currentQuestion.maxLength || 1000"
                  class="essay-textarea"
                />
                <div class="essay-tips">
                  <el-icon><InfoFilled /></el-icon>
                  <span>建议字数：{{ currentQuestion.minLength || 50 }} - {{ currentQuestion.maxLength || 1000 }} 字</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 题目导航 -->
          <div class="question-navigation">
            <el-button
              type="primary"
              plain
              @click="previousQuestion"
              :disabled="currentQuestionIndex === 0"
            >
              <el-icon><ArrowLeft /></el-icon>
              上一题
            </el-button>
            
            <div class="nav-center">
              <el-button
                type="success"
                plain
                @click="markQuestion"
              >
                <el-icon><Flag /></el-icon>
                {{ isMarked ? '取消标记' : '标记题目' }}
              </el-button>
            </div>
            
            <el-button
              type="primary"
              plain
              @click="nextQuestion"
              :disabled="currentQuestionIndex === questions.length - 1"
            >
              下一题
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="sidebar">
          <!-- 答题卡 -->
          <div class="answer-card">
            <div class="card-header">
              <h3>答题卡</h3>
              <div class="progress-info">
                已答：{{ answeredCount }} / {{ questions.length }}
              </div>
            </div>
            
            <div class="card-content">
              <div class="question-grid">
                <div
                  v-for="(question, index) in questions"
                  :key="question.id"
                  class="question-item"
                  :class="{
                    'is-current': index === currentQuestionIndex,
                    'is-answered': isAnswered(question.id),
                    'is-marked': markedQuestions.includes(question.id)
                  }"
                  @click="goToQuestion(index)"
                >
                  <span class="question-num">{{ index + 1 }}</span>
                  <el-icon v-if="markedQuestions.includes(question.id)" class="mark-icon">
                    <Flag />
                  </el-icon>
                </div>
              </div>
            </div>
            
            <div class="card-footer">
              <div class="legend">
                <div class="legend-item">
                  <span class="legend-dot current"></span>
                  <span class="legend-text">当前题</span>
                </div>
                <div class="legend-item">
                  <span class="legend-dot answered"></span>
                  <span class="legend-text">已答</span>
                </div>
                <div class="legend-item">
                  <span class="legend-dot marked"></span>
                  <span class="legend-text">标记</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 考试统计 -->
          <div class="exam-stats">
            <div class="stat-item">
              <div class="stat-label">考试时长</div>
              <div class="stat-value">{{ exam.duration }}分钟</div>
            </div>
            
            <div class="stat-item">
              <div class="stat-label">已用时间</div>
              <div class="stat-value">{{ formatTime(exam.duration * 60 - remainingTime) }}</div>
            </div>
            
            <div class="stat-item">
              <div class="stat-label">剩余时间</div>
              <div class="stat-value" :class="{ 'time-warning': remainingTime < 600 }">
                {{ formatTime(remainingTime) }}
              </div>
            </div>
            
            <div class="stat-item">
              <div class="stat-label">答题进度</div>
              <div class="stat-value">
                {{ Math.round((answeredCount / questions.length) * 100) }}%
              </div>
            </div>
          </div>
          
          <!-- 快捷操作 -->
          <div class="quick-actions">
            <el-button
              type="warning"
              plain
              size="small"
              @click="showMarkedQuestions"
              :disabled="markedQuestions.length === 0"
            >
              查看标记题目 ({{ markedQuestions.length }})
            </el-button>
            
            <el-button
              type="info"
              plain
              size="small"
              @click="showUnansweredQuestions"
              :disabled="unansweredCount === 0"
            >
              查看未答题目 ({{ unansweredCount }})
            </el-button>
            
            <el-button
              type="primary"
              size="small"
              @click="autoSave"
              :loading="saving"
            >
              手动保存
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="imagePreviewVisible"
      title="图片预览"
      width="80%"
      center
    >
      <div class="image-preview">
        <img :src="previewImageUrl" alt="预览图片" class="preview-image" />
      </div>
    </el-dialog>
    
    <!-- 标记题目对话框 -->
    <el-dialog
      v-model="markedDialogVisible"
      title="标记的题目"
      width="600px"
    >
      <div class="marked-questions">
        <div
          v-for="(questionId, index) in markedQuestions"
          :key="questionId"
          class="marked-item"
          @click="goToQuestionById(questionId)"
        >
          <span class="marked-number">第{{ getQuestionIndex(questionId) + 1 }}题</span>
          <span class="marked-type">{{ getQuestionTypeText(getQuestionById(questionId).type) }}</span>
          <span class="marked-status">
            {{ isAnswered(questionId) ? '已答' : '未答' }}
          </span>
        </div>
      </div>
    </el-dialog>
    
    <!-- 未答题目对话框 -->
    <el-dialog
      v-model="unansweredDialogVisible"
      title="未答的题目"
      width="600px"
    >
      <div class="unanswered-questions">
        <div
          v-for="(question, index) in unansweredQuestions"
          :key="question.id"
          class="unanswered-item"
          @click="goToQuestionById(question.id)"
        >
          <span class="unanswered-number">第{{ getQuestionIndex(question.id) + 1 }}题</span>
          <span class="unanswered-type">{{ getQuestionTypeText(question.type) }}</span>
          <span class="unanswered-score">{{ question.score }}分</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Document,
  Clock,
  ArrowLeft,
  ArrowRight,
  Flag,
  Check,
  Close,
  InfoFilled
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getExamQuestions, saveExamAnswer, submitExam } from '@/api/exam'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(true)
const saving = ref(false)
const exam = ref({})
const questions = ref([])
const answers = ref({})
const markedQuestions = ref([])
const currentQuestionIndex = ref(0)
const remainingTime = ref(0)
const timer = ref(null)
const autoSaveTimer = ref(null)
const imagePreviewVisible = ref(false)
const previewImageUrl = ref('')
const markedDialogVisible = ref(false)
const unansweredDialogVisible = ref(false)

// 计算属性
const currentQuestion = computed(() => {
  return questions.value[currentQuestionIndex.value] || {}
})

const isMarked = computed(() => {
  return markedQuestions.value.includes(currentQuestion.value.id)
})

const answeredCount = computed(() => {
  return Object.keys(answers.value).filter(questionId => {
    const answer = answers.value[questionId]
    if (Array.isArray(answer)) {
      return answer.some(item => item !== '' && item !== null && item !== undefined)
    }
    return answer !== '' && answer !== null && answer !== undefined
  }).length
})

const unansweredCount = computed(() => {
  return questions.value.length - answeredCount.value
})

const unansweredQuestions = computed(() => {
  return questions.value.filter(question => !isAnswered(question.id))
})

const canPause = computed(() => {
  return exam.value.allowPause && remainingTime.value > 0
})

// 方法
const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  
  if (hours > 0) {
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  } else {
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
}

const getQuestionTypeText = (type) => {
  const texts = {
    single: '单选题',
    multiple: '多选题',
    judge: '判断题',
    fill: '填空题',
    essay: '简答题'
  }
  return texts[type] || '其他'
}

const isAnswered = (questionId) => {
  const answer = answers.value[questionId]
  if (Array.isArray(answer)) {
    return answer.some(item => item !== '' && item !== null && item !== undefined)
  }
  return answer !== '' && answer !== null && answer !== undefined
}

const getQuestionById = (questionId) => {
  return questions.value.find(q => q.id === questionId) || {}
}

const getQuestionIndex = (questionId) => {
  return questions.value.findIndex(q => q.id === questionId)
}

// 题目导航
const previousQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
  }
}

const nextQuestion = () => {
  if (currentQuestionIndex.value < questions.value.length - 1) {
    currentQuestionIndex.value++
  }
}

const goToQuestion = (index) => {
  currentQuestionIndex.value = index
}

const goToQuestionById = (questionId) => {
  const index = getQuestionIndex(questionId)
  if (index !== -1) {
    currentQuestionIndex.value = index
    markedDialogVisible.value = false
    unansweredDialogVisible.value = false
  }
}

// 标记题目
const markQuestion = () => {
  const questionId = currentQuestion.value.id
  const index = markedQuestions.value.indexOf(questionId)
  
  if (index === -1) {
    markedQuestions.value.push(questionId)
    ElMessage.success('题目已标记')
  } else {
    markedQuestions.value.splice(index, 1)
    ElMessage.success('已取消标记')
  }
}

// 保存答案
const saveAnswer = async () => {
  try {
    await saveExamAnswer({
      examId: route.params.id,
      questionId: currentQuestion.value.id,
      answer: answers.value[currentQuestion.value.id]
    })
  } catch (error) {
    console.error('保存答案失败:', error)
  }
}

// 自动保存
const autoSave = async () => {
  try {
    saving.value = true
    await saveExamAnswer({
      examId: route.params.id,
      answers: answers.value,
      markedQuestions: markedQuestions.value
    })
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

// 图片预览
const previewImage = (imageUrl) => {
  previewImageUrl.value = imageUrl
  imagePreviewVisible.value = true
}

// 显示标记题目
const showMarkedQuestions = () => {
  markedDialogVisible.value = true
}

// 显示未答题目
const showUnansweredQuestions = () => {
  unansweredDialogVisible.value = true
}

// 暂停考试
const handlePause = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要暂停考试吗？暂停后可以稍后继续答题。',
      '暂停考试',
      {
        confirmButtonText: '确定暂停',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 保存当前答题状态
    await autoSave()
    
    // 跳转回考试详情页
    router.push(`/exam/${route.params.id}`)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('暂停考试失败')
    }
  }
}

// 提交试卷
const handleSubmit = async () => {
  try {
    // 检查未答题目
    if (unansweredCount.value > 0) {
      await ElMessageBox.confirm(
        `您还有 ${unansweredCount.value} 道题目未作答，确定要提交试卷吗？`,
        '提交确认',
        {
          confirmButtonText: '确定提交',
          cancelButtonText: '继续答题',
          type: 'warning'
        }
      )
    } else {
      await ElMessageBox.confirm(
        '确定要提交试卷吗？提交后将无法修改答案。',
        '提交确认',
        {
          confirmButtonText: '确定提交',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
    }
    
    // 提交试卷
    await submitExam({
      examId: route.params.id,
      answers: answers.value,
      markedQuestions: markedQuestions.value
    })
    
    ElMessage.success('试卷提交成功')
    router.push(`/exam/${route.params.id}/result`)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('提交试卷失败')
    }
  }
}

// 时间到自动提交
const timeUpSubmit = async () => {
  try {
    await submitExam({
      examId: route.params.id,
      answers: answers.value,
      markedQuestions: markedQuestions.value
    })
    
    ElMessage.warning('考试时间已到，系统已自动提交试卷')
    router.push(`/exam/${route.params.id}/result`)
  } catch (error) {
    ElMessage.error('自动提交失败，请手动提交')
  }
}

// 初始化答案
const initializeAnswers = () => {
  questions.value.forEach(question => {
    if (!answers.value[question.id]) {
      if (question.type === 'multiple') {
        answers.value[question.id] = []
      } else if (question.type === 'fill') {
        answers.value[question.id] = new Array(question.blanks?.length || 1).fill('')
      } else {
        answers.value[question.id] = ''
      }
    }
  })
}

// 启动定时器
const startTimer = () => {
  timer.value = setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value--
      
      // 时间警告
      if (remainingTime.value === 600) { // 10分钟
        ElMessage.warning('考试时间还剩10分钟，请注意时间')
      } else if (remainingTime.value === 300) { // 5分钟
        ElMessage.warning('考试时间还剩5分钟，请尽快完成')
      } else if (remainingTime.value === 60) { // 1分钟
        ElMessage.error('考试时间还剩1分钟，请立即提交')
      }
    } else {
      clearInterval(timer.value)
      timeUpSubmit()
    }
  }, 1000)
}

// 启动自动保存
const startAutoSave = () => {
  autoSaveTimer.value = setInterval(() => {
    autoSave()
  }, 30000) // 每30秒自动保存一次
}

// 数据加载
const loadExamData = async () => {
  try {
    loading.value = true
    const response = await getExamQuestions(route.params.id)
    
    exam.value = response.data.exam
    questions.value = response.data.questions
    answers.value = response.data.answers || {}
    markedQuestions.value = response.data.markedQuestions || []
    remainingTime.value = response.data.remainingTime
    
    // 初始化答案
    initializeAnswers()
    
    // 启动定时器
    startTimer()
    startAutoSave()
  } catch (error) {
    ElMessage.error('加载考试数据失败')
    router.push('/exams')
  } finally {
    loading.value = false
  }
}

// 页面离开确认
const beforeUnload = (event) => {
  event.preventDefault()
  event.returnValue = ''
  return ''
}

// 监听路由变化
watch(() => route.path, (newPath) => {
  if (!newPath.includes('/exam/') || !newPath.includes('/take')) {
    // 离开考试页面时自动保存
    autoSave()
  }
})

// 生命周期
onMounted(() => {
  loadExamData()
  
  // 添加页面离开确认
  window.addEventListener('beforeunload', beforeUnload)
  
  // 禁用右键菜单
  document.addEventListener('contextmenu', (e) => e.preventDefault())
  
  // 禁用F12等开发者工具快捷键
  document.addEventListener('keydown', (e) => {
    if (e.key === 'F12' || 
        (e.ctrlKey && e.shiftKey && e.key === 'I') ||
        (e.ctrlKey && e.shiftKey && e.key === 'C') ||
        (e.ctrlKey && e.key === 'u')) {
      e.preventDefault()
    }
  })
})

onUnmounted(() => {
  // 清理定时器
  if (timer.value) {
    clearInterval(timer.value)
  }
  if (autoSaveTimer.value) {
    clearInterval(autoSaveTimer.value)
  }
  
  // 移除事件监听
  window.removeEventListener('beforeunload', beforeUnload)
  document.removeEventListener('contextmenu', (e) => e.preventDefault())
})
</script>

<style lang="scss" scoped>
.exam-taking {
  min-height: 100vh;
  background: var(--bg-color);
  display: flex;
  flex-direction: column;
}

.exam-header {
  background: white;
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left {
  .exam-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-color-primary);
  }
  
  .exam-info {
    display: flex;
    gap: var(--spacing-lg);
    
    .info-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
      
      .el-icon {
        font-size: 14px;
      }
    }
  }
}

.header-right {
  display: flex;
  gap: var(--spacing-md);
}

.exam-content {
  flex: 1;
  padding: var(--spacing-lg);
}

.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-lg);
  height: calc(100vh - 120px);
}

.question-area {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.question-header {
  background: var(--fill-color-extra-light);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  
  .question-number {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-color-primary);
  }
  
  .question-type {
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-small);
  }
  
  .question-score {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
}

.question-content {
  flex: 1;
  padding: var(--spacing-lg);
  overflow-y: auto;
}

.question-text {
  font-size: var(--font-size-medium);
  line-height: 1.6;
  color: var(--text-color-primary);
  margin-bottom: var(--spacing-lg);
  
  :deep(p) {
    margin: 0 0 var(--spacing-md) 0;
  }
  
  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-base);
    margin: var(--spacing-md) 0;
  }
}

.question-images {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.question-image {
  max-width: 200px;
  max-height: 150px;
  object-fit: cover;
  border-radius: var(--border-radius-base);
  cursor: pointer;
  transition: var(--transition-all);
  
  &:hover {
    transform: scale(1.05);
    box-shadow: var(--box-shadow-base);
  }
}

.answer-area {
  margin-top: var(--spacing-lg);
}

.single-choice,
.multiple-choice {
  .option-item {
    margin-bottom: var(--spacing-md);
    
    .option-radio,
    .option-checkbox {
      width: 100%;
      
      :deep(.el-radio__label),
      :deep(.el-checkbox__label) {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding-left: var(--spacing-sm);
        line-height: 1.5;
        
        .option-key {
          font-weight: 600;
          color: var(--primary-color);
          flex-shrink: 0;
        }
        
        .option-text {
          flex: 1;
        }
      }
    }
  }
}

.judge-choice {
  .judge-options {
    display: flex;
    gap: var(--spacing-xl);
    justify-content: center;
    
    .judge-option {
      :deep(.el-radio__label) {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-medium);
        font-weight: 500;
        
        .judge-icon {
          font-size: 20px;
          
          &.correct {
            color: var(--success-color);
          }
          
          &.wrong {
            color: var(--danger-color);
          }
        }
      }
    }
  }
}

.fill-answer {
  .blank-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    
    .blank-label {
      min-width: 80px;
      font-weight: 500;
      color: var(--text-color-primary);
    }
    
    .blank-input {
      flex: 1;
      max-width: 300px;
    }
  }
}

.essay-answer {
  .essay-textarea {
    :deep(.el-textarea__inner) {
      min-height: 200px;
      line-height: 1.6;
    }
  }
  
  .essay-tips {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    
    .el-icon {
      color: var(--primary-color);
    }
  }
}

.question-navigation {
  background: var(--fill-color-extra-light);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  height: fit-content;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.answer-card {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
}

.card-header {
  background: var(--primary-color);
  color: white;
  padding: var(--spacing-md);
  
  h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-medium);
  }
  
  .progress-info {
    font-size: var(--font-size-small);
    opacity: 0.9;
  }
}

.card-content {
  padding: var(--spacing-md);
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-xs);
}

.question-item {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-all);
  background: white;
  
  .question-num {
    font-size: var(--font-size-small);
    font-weight: 500;
  }
  
  .mark-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 12px;
    color: var(--warning-color);
  }
  
  &.is-current {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }
  
  &.is-answered {
    background: var(--success-color-light-9);
    border-color: var(--success-color);
    color: var(--success-color);
  }
  
  &.is-marked {
    border-color: var(--warning-color);
  }
  
  &:hover {
    transform: scale(1.1);
    box-shadow: var(--box-shadow-base);
  }
}

.card-footer {
  background: var(--fill-color-extra-light);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.legend {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: var(--text-color-secondary);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  
  &.current {
    background: var(--primary-color);
  }
  
  &.answered {
    background: var(--success-color);
  }
  
  &.marked {
    background: var(--warning-color);
  }
}

.exam-stats {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  padding: var(--spacing-md);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color-extra-light);
  
  &:last-child {
    border-bottom: none;
  }
  
  .stat-label {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
  
  .stat-value {
    font-weight: 600;
    color: var(--text-color-primary);
    
    &.time-warning {
      color: var(--danger-color);
    }
  }
}

.quick-actions {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.image-preview {
  text-align: center;
  
  .preview-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }
}

.marked-questions,
.unanswered-questions {
  max-height: 400px;
  overflow-y: auto;
}

.marked-item,
.unanswered-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color-extra-light);
  cursor: pointer;
  transition: var(--transition-all);
  
  &:hover {
    background: var(--fill-color-extra-light);
  }
  
  &:last-child {
    border-bottom: none;
  }
}

.marked-number,
.unanswered-number {
  font-weight: 600;
  color: var(--text-color-primary);
}

.marked-type,
.unanswered-type {
  color: var(--text-color-secondary);
  font-size: var(--font-size-small);
}

.marked-status {
  font-size: var(--font-size-small);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-small);
  
  &:contains('已答') {
    background: var(--success-color-light-9);
    color: var(--success-color);
  }
  
  &:contains('未答') {
    background: var(--warning-color-light-9);
    color: var(--warning-color);
  }
}

.unanswered-score {
  font-weight: 600;
  color: var(--primary-color);
  font-size: var(--font-size-small);
}

// 响应式设计
@include respond-below(lg) {
  .content-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: auto;
  }
  
  .sidebar {
    max-height: none;
    order: 2;
  }
  
  .question-area {
    order: 1;
    min-height: 60vh;
  }
}

@include respond-below(md) {
  .exam-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
    
    .header-left {
      text-align: center;
    }
    
    .header-right {
      justify-content: center;
    }
  }
  
  .exam-content {
    padding: var(--spacing-md);
  }
  
  .question-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .question-navigation {
    flex-direction: column;
    gap: var(--spacing-md);
    
    .nav-center {
      order: -1;
    }
  }
}

@include respond-below(sm) {
  .question-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .judge-options {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .blank-item {
    flex-direction: column;
    align-items: stretch;
    
    .blank-label {
      min-width: auto;
    }
    
    .blank-input {
      max-width: none;
    }
  }
}
</style>